<section [formGroup]="generatorConfigForm" class="tb-form-panel no-border no-padding">
  <div class="tb-form-panel no-padding-bottom stroked">
    <div class="tb-form-panel-title" translate>tb.rulenode.generation-parameters</div>
    <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
      <mat-form-field class="flex">
        <mat-label translate>tb.rulenode.message-count</mat-label>
        <input required type="number" min="0" step="1" matInput formControlName="msgCount">
        <mat-error *ngIf="generatorConfigForm.get('msgCount').hasError('required')">
          {{ 'tb.rulenode.message-count-required' | translate }}
        </mat-error>
        <mat-error *ngIf="generatorConfigForm.get('msgCount').hasError('min')">
          {{ 'tb.rulenode.min-message-count-message' | translate }}
        </mat-error>
      </mat-form-field>
      <mat-form-field class="flex">
        <mat-label translate>tb.rulenode.period-seconds</mat-label>
        <input required type="number" min="1" step="1" matInput formControlName="periodInSeconds">
        <mat-error *ngIf="generatorConfigForm.get('periodInSeconds').hasError('required')">
          {{ 'tb.rulenode.period-seconds-required' | translate }}
        </mat-error>
        <mat-error *ngIf="generatorConfigForm.get('periodInSeconds').hasError('min')">
          {{ 'tb.rulenode.min-period-seconds-message' | translate }}
        </mat-error>
      </mat-form-field>
    </div>
  </div>

  <div class="tb-form-panel no-padding-bottom stroked">
    <div class="tb-form-panel-title" translate>tb.rulenode.originator</div>
    <tb-entity-select fxFlex
                      required="true"
                      useAliasEntityTypes="true"
                      [allowedEntityTypes]="allowedEntityTypes"
                      [additionEntityTypes]="additionEntityTypes"
                      formControlName="originator">
    </tb-entity-select>
  </div>
  <div class="tb-form-panel no-padding-bottom stroked">
    <div class="tb-form-panel-title" translate>tb.rulenode.generator-function</div>
    <tb-js-func *ngIf="generatorConfigForm.get('scriptLang').value === scriptLanguage.JS"
                #jsFuncComponent
                formControlName="jsScript"
                functionName="Generate"
                [functionArgs]="['prevMsg', 'prevMetadata', 'prevMsgType']"
                helpId="rulenode/generator_node_script_fn"
                noValidate="true">
      <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill" *ngIf="tbelEnabled">
        <tb-toggle-option [value]="scriptLanguage.TBEL">
          {{ 'tb.rulenode.script-lang-tbel' | translate }}
        </tb-toggle-option>
        <tb-toggle-option [value]="scriptLanguage.JS">
          {{ 'tb.rulenode.script-lang-js' | translate }}
        </tb-toggle-option>
      </tb-toggle-select>
      <button toolbarSuffixButton
              mat-icon-button
              matTooltip="{{ testScriptLabel | translate }}"
              matTooltipPosition="above"
              class="tb-mat-32"
              (click)="testScript()">
        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
      </button>
    </tb-js-func>
    <tb-js-func *ngIf="generatorConfigForm.get('scriptLang').value === scriptLanguage.TBEL"
                #tbelFuncComponent
                formControlName="tbelScript"
                functionName="Generate"
                [functionArgs]="['prevMsg', 'prevMetadata', 'prevMsgType']"
                [disableUndefinedCheck]="true"
                [scriptLanguage]="scriptLanguage.TBEL"
                helpId="rulenode/tbel/generator_node_script_fn"
                noValidate="true">
      <tb-toggle-select toolbarPrefixButton formControlName="scriptLang" appearance="fill">
        <tb-toggle-option [value]="scriptLanguage.TBEL">
          {{ 'tb.rulenode.script-lang-tbel' | translate }}
        </tb-toggle-option>
        <tb-toggle-option [value]="scriptLanguage.JS">
          {{ 'tb.rulenode.script-lang-js' | translate }}
        </tb-toggle-option>
      </tb-toggle-select>
      <button toolbarSuffixButton
              mat-icon-button
              matTooltip="{{ testScriptLabel | translate }}"
              matTooltipPosition="above"
              class="tb-mat-32"
              (click)="testScript()">
        <mat-icon class="material-icons" color="primary">bug_report</mat-icon>
      </button>
    </tb-js-func>
    <div fxLayout="row" style="padding-bottom: 16px;">
      <button mat-button mat-raised-button color="primary" (click)="testScript()">
        {{ testScriptLabel | translate }}
      </button>
    </div>
  </div>
</section>
